<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="btn1Handler">按钮1</button>
            <br>
            <button @click="btn2Handler(22)">按钮2</button>
            <br>
            <button @click="btn3Handler($event, 22)">按钮3</button>
            <br>
            <button @click="this.btn4Handler">按钮4</button>
            <br>
            <button @click="this.btn5Handler(25)">按钮5</button>

        </div>
        <script>

            function btn5Handler () {
                console.log('我爱你')
            }

            new Vue({
                el: "#app",
                data: {},
                methods: {
                    btn1Handler(e) {
                        console.log('btn1回调触发', e)
                    },
                    btn2Handler(e) {
                        console.log('btn2回调触发', e) // 22
                    },
                    btn3Handler(e, arg) {
                        console.log('btn3回调触发', e, arg)
                    },
                    btn4Handler(e) {
                        console.log('btn4回调触发', e)
                    },
                    btn5Handler(e) {
                        console.log('btn5回调触发', e)
                    }
                }
            })
        </script>
    </body>
</html>